<template>
  <div id="MapTest">
    <h1 class="map-title">AMap辅助测试</h1>
    <div class="map-container" id="container"></div>

    <div class="map-init">
      地图预设
      <hr>
    </div>

    <div class="map-info">
      地图交互
      <hr>
      <p v-if="mapInfo.center.length>0">
        经纬度：
        <span>
          经度 {{mapInfo.center[1]}} 纬度 {{mapInfo.center[0]}}
        </span>
      </p>
    </div>

    <div class="map-layers">
      地图图层
      <hr>
      <div>
        <el-button type="danger" @click="clearAllLayer" size="mini">清除所有图层</el-button>
      </div>
    </div>

    <div class="map-operator">
      地图数据
      <el-button type="success" @click="testBtn" size="mini">测试</el-button>
      <hr>
      <div>
        <p>请求地址：</p>
        <el-input type="textarea" 
          v-model="mapData.url" 
          rows="3"
          placeholder="粘贴测试url"></el-input>
      </div>
      
      <div v-if="mapData.fields.length>0">
        <p>选择字段：</p>
        <el-radio-group v-model="mapData.renderField"
          @change="changeRenderData">
          <el-radio-button v-for="(field, index) in mapData.fields" 
            :label="field" 
            :key="index"></el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="mapData.renderField">
        <p>当前数据：</p>
        <div class="new-data">
          {{mapData.data}}
        </div>
      </div>
      <div v-if="mapData.renderField">
        <p>渲染类型：</p>
        <div class="rander-btns">
          <el-radio-group v-model="mapData.renderType"
            @change="renderMap">
            <el-radio-button label="边界"></el-radio-button>
            <el-radio-button label="散点"></el-radio-button>
            <el-radio-button label="聚合"></el-radio-button>
            <el-radio-button label="热力"></el-radio-button>
            <el-radio-button label="填色"></el-radio-button>
            <el-radio-button label="OD"></el-radio-button>
            <el-radio-button label="轨迹"></el-radio-button>
          </el-radio-group>
          
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import mapU from "@/utils/newMapUtiles"

export default {
  data(){
    return {
      map: {},
      overlayGroup: [], // 覆盖物群组
      mapInfo:{ 
        center: [],
        zoom: 0
      },
      mapInit: {  // 默认初始化配置
        zoom: 11,
        center: [116.756, 39.817]
      },
      mapData: {  // 地图渲染集
        url: '',
        primitiveData: {},
        data: {},
        fields: [],
        renderField: '',
        renderType: '',
      },
      defaultMapData: {  
        primitiveData: {},
        data: {},
        fields: [],
        renderField: '',
        renderType: '',
      }
    }
  },
  computed: {
    curMapUrl(){
      return this.mapData.url
    },
  },
  mounted(){
    // 地图初始化
    const {map, overlayGroup} = mapU.mapInit(this.mapInit)
    this.map = map
    this.overlayGroup = overlayGroup

    // 绑定事件
    this.map.on('click', e=>{
      this.mapInfo.center = [e.lnglat.getLng(), e.lnglat.getLat()]
      // 地图方法
      
    })
  },
  watch:{
    curMapUrl(url){
      const _self = this
      if(url){
        this.$axios.get(url)
          .then(res=>{
            // 初始化
            _self.mapData = Object.assign(_self.mapData, _self.defaultMapData)
            // 暂时保存所有数据
            _self.mapData.primitiveData = res.data
            // 保存字段列表，通过选择字段过滤数据
            _self.mapData.fields = Object.keys(res.data)
          })
          .catch(err=>{
            // console.log(err);
          })
      }
    }
  },
  methods:{
    // 选择渲染字段过去数据
    changeRenderData(val){
      this.mapData.data = this.mapData.primitiveData[val]
    },
    // 渲染制定图层
    renderMap(type){
      let temp = mapU.overlayOperator(this.map, this.overlayGroup, type, this.mapData.data)
      // this.layerObj[type] = Object.assign({},temp)
      // this.layerList.push(type)
    },
    // 删除单一图层
    // removeLayer(obj){
    //   mapU.overlaysRemoveItem(this.overlayGroup, obj)
    // },
    // 清除所有图层
    clearAllLayer(){
      this.overlayGroup.clearOverlays()
    },
    // 测试按钮
    testBtn(){
      console.log('test btn')
      // 查看所有图层
      console.log(this.map.getLayers())
    }
  }
}



</script>

<style lang="stylus" scoped>
#MapTest
  width 100%
  height 100%
  position relative

  // 标题
  .map-title
    position absolute
    top 0
    left 20px
    z-index 1

  // 地图
  .map-container
    height 100%
    width 100%

  // 地图预设（左下）
  .map-init
    position absolute
    bottom 0
    left 0
    width 280px
    padding 10px
    background #C0392B

  // 地图信息（右上）
  .map-info
    position absolute
    top 0
    right 400px
    width 380px
    padding 10px
    background #2980B9
    
  // 地图操作（右）
  .map-operator
    position absolute
    top 0
    right 0
    width 380px
    padding 10px
    height 100%
    background #2C3E50

    &>div
      margin-bottom 20px

  // 地图图层（右下）
  .map-layers
    position absolute
    bottom 0
    right 400px
    width 280px
    padding 10px
    background #3498DB

.new-data
  height 100px
  overflow-y auto
  background #7F8C8D
  padding 10px
</style>
